<template>
<div>
<h1>领悟读书的智慧</h1>
  <br>
<!--  <el-carousel :interval="4000" type="card" height="300px">
    <el-carousel-item v-for="item in 6" :key="item.id">
      <h3 class="medium">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>-->
  <el-carousel :interval="4000" type="card" height="400px">
    <el-carousel-item v-for="item in items" :key="item.id">
      <img :src="item.image" alt="Carousel image" />
      <h3 class="medium">{{ item.name }}</h3>
    </el-carousel-item>
  </el-carousel>

  <div class="flex-container">
    <el-card class="box-card flex-item">
      <div class="card-header">
        <h2>消费者来信</h2>
        <hr/>
      </div>
      <br>
      <div>用户： 战豆豆&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;邮箱：beiqi@zhandd.com</div>
      <br>
      <br>
      <div>发来消息： 范闲 红楼什么时候更新？&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text">&nbsp;&nbsp;
        <el-button type="success" size="small" autocomplete="off">回复</el-button>
      </div>
      <br>
      <br>
      <div>

      </div>
      <br>

       <div>
      <el-radio-group v-model="radio1">
        <el-radio-button label="已读"></el-radio-button>
        <el-radio-button label="已处理"></el-radio-button>
        <el-radio-button label="未读"></el-radio-button>
        <el-radio-button label="未处理"></el-radio-button>
      </el-radio-group>
    </div>
    </el-card>

    <el-card class="box-card flex-item">
      <div class="card-header">
        <h2>反馈</h2>
        <hr/>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{'反馈内容 ' + o }}       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;       用户：
      </div>
    </el-card>
  </div>




</div>

</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Home",
  data(){
    return {
      radio1: '上海',
      items: [
        { id: 1, name: 'Item 1', image: 'https://th.bing.com/th/id/OIP.gZFqCIbcLkuIzVR6YGy2EAHaJN?w=156&h=193&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
        { id: 2, name: 'Item 2', image: 'https://th.bing.com/th/id/OIP.azmC8MDS_kg4Refb0knqngHaJN?w=156&h=193&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
        { id: 3, name: 'Item 2', image: 'https://th.bing.com/th/id/OIP.-eDxgfi1qyxxKkZmfys1kgHaJN?w=155&h=193&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
        { id: 4, name: 'Item 2', image: 'https://th.bing.com/th/id/OIP.kj25qpVb9FrLzdJ4pm7v5gHaKW?w=129&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
        { id: 5, name: 'Item 2', image: 'https://th.bing.com/th/id/OIP.d5pMeXtt93-SN0j3INOTCwHaE7?w=280&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7' },
        { id: 6, name: 'Item 2', image: 'https://th.bing.com/th/id/OIP.vk5YaiAkCjt1X6vlvBgblAHaKe?w=132&h=187&c=7&r=0&o=5&dpr=1.5&pid=1.7' },

      ],
      tag: [
        { type: '', label: '未读' },
        { type: 'success', label: '未回复' },
        { type: 'info', label: '已读' },
        { type: 'danger', label: '已处理' },
        { type: 'warning', label: '未处理' }
      ]
    }
  }


}

</script>

<style>
.el-carousel__item h3 {
  color: #ffff;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #ffff;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #ffff;
}

.el-carousel__item img {
  width: 600px;
  height: 400px;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.flex-container {
  display: flex;
  gap: 20px;
}

.flex-item {
  flex: 1 1 0px;
}

.flex-container {
  display: flex;
  gap: 20px; /*调整两个卡片之间的间距*/
}

.flex-item {
  flex: 1 1 0px; /*让每个卡片自动缩放以适应容器宽度*/
}

.card-header {
  text-align: center; /*标题居中*/
}

.card-header h2 {
  margin-bottom: 0; /*移除标题下的外边距*/
}

.card-header hr {
  margin-top: 10px; /*添加一些上外边距以创建更多空间*/
}

</style>
